import React from 'react'
import { connect } from 'react-redux'
import { messages } from "share/common"
import { Form, Card, Button, Input, Checkbox, message, Icon, Spin } from 'antd'
const FormItem = Form.Item;
const CheckboxGroup = Checkbox.Group;
const TextArea = Input.TextArea;
import 'styles/setting/workflow/new-workflow.scss'
import LanguageInput from 'components/template/language-input/language-input'
import workflowUtil from 'containers/setting/new-workflow/utils'
class NewNodeKnow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      notifyInfoOption: [
        { label: messages('setting.key1396'/*APP消息*/), value: 'isApp' },
        {
          label: (
            <span className="notify-weChat">
              {messages('setting.key2136')/*微信企业号消息，企业微信消息，钉钉消息*/}
            </span>
          ), value: 'isWeChat',
        },
        { label: messages('setting.key1399'/*网页端消息*/), value: 'isWeb',},
        { label:messages('setting.key2120')/*邮件*/, value: 'isEmail',}
      ],
      notifyWay: [],
      basicInfo: {},
      notifyTitle: props.basicInfo.notifyInfo && props.basicInfo.notifyInfo.title,
    }
  }

  componentDidMount() {
    let notifyWay = [];
    let { basicInfo } = this.props;
    basicInfo.notifyInfo.isApp && notifyWay.push('isApp');
    basicInfo.notifyInfo.isWeChat && notifyWay.push('isWeChat');
    basicInfo.notifyInfo.isWeb && notifyWay.push('isWeb');
    basicInfo.notifyInfo.isEmail && notifyWay.push('isEmail');
    basicInfo.title = basicInfo.notifyInfo.title;
    basicInfo.content = basicInfo.notifyInfo.content;
    basicInfo.notifyWay = notifyWay;
    this.setState({ notifyWay, basicInfo: basicInfo, })
  }

  componentWillReceiveProps(nextProps) {
    let notifyWay = [];
    let { basicInfo } = nextProps;
    basicInfo.notifyInfo.isApp && notifyWay.push('isApp');
    basicInfo.notifyInfo.isWeChat && notifyWay.push('isWeChat');
    basicInfo.notifyInfo.isWeb && notifyWay.push('isWeb');
    basicInfo.notifyInfo.isEmail && notifyWay.push('isEmail');
    basicInfo.title = basicInfo.notifyInfo.title;
    basicInfo.content = basicInfo.notifyInfo.content;
    basicInfo.notifyWay = notifyWay;
    this.setState({ notifyWay, basicInfo: basicInfo, })
  }

  onChange = (e, attr) => {
    let { basicInfo } = this.state;
    basicInfo[attr] = e;
    this.setState({ basicInfo });
    this.props.onChangeAttr(e, attr);
  };

  handleRemarkChange = (value,i18n) => {
    this.onChange(value,'remark');
    this.onChange({ remark: i18n }, 'i18n');
  };

  render() {
    const { user, formInfo, language } = this.props;
    const { notifyInfoOption, notifyWay, notifyTitle, basicInfo, nodeNameObj } = this.state;
    const formItemLayout = {
      labelCol: { span: language.code === 'zh_cn' ? 3 : 5 },
      wrapperCol: { span: language.code === 'zh_cn' ? 21 : 19 },
    };
    return (
      <div className='node-know'>
        <FormItem {...formItemLayout} label={messages('setting.key1372'/*节点名称*/)} colon={false}>
          <LanguageInput
            name={basicInfo.remark }
            width={300}
            inpRule={workflowUtil.getInpRule(100, this.props.languageList)}
            i18nName={basicInfo.i18n && basicInfo.i18n.remark}
            isEdit
            nameChange={this.handleRemarkChange}
          />
        </FormItem>
        <FormItem {...formItemLayout} label={messages('setting.key1400'/*知会方式*/)} colon={false}>
          <CheckboxGroup
            value={basicInfo.notifyWay}
            onChange={e => {this.onChange(e, 'notifyWay')}}
            options={notifyInfoOption}
          />
        </FormItem>
        <FormItem {...formItemLayout} label={messages('setting.key1401'/*知会格式*/)} colon={false}>
          <div>{messages('setting.key1402'/*点击知会消息将进入单据详情页，只能查看，不可编辑*/)}</div>
          <FormItem {...formItemLayout} label={messages('setting.key1403'/*标题*/)} colon={false}>
            <div>{messages('setting.key1404'/*姓名 - 单据名称 - 自定义标题*/)}</div>
            <Input value={basicInfo.title} placeholder={messages('setting.key1405'/*可输入自定义标题，最多20个字符*/)}
                   style={{ width: 330 }} autoComplete="off"
                   onChange={e => {
                     this.setState({ notifyTitle: e.target.value });
                     this.onChange(e.target.value, 'title')
                   }}/>
            <h4 className="notify-title-show">{messages('setting.key1406'/*知会标题预览*/)}：</h4>
            <div>{user.fullName} - {formInfo.formName}{notifyTitle ? ` - ${notifyTitle}` : ''}</div>
          </FormItem>
          <FormItem {...formItemLayout} label={messages('setting.key1407'/*正文*/)} colon={false}>
            <div>{messages('setting.key1408'/*单据上的【事由】*/)}</div>
            <TextArea value={ basicInfo.content} onChange={e => {this.onChange(e.target.value, 'content')}}
                      placeholder={messages('setting.key1409'/*可输入自定义事由，最多100个字符*/)}
                      rows={3} style={{ resize: 'none', width: 400 }}/>
          </FormItem>
        </FormItem>
      </div>
    )
  }
}

NewNodeKnow.propTypes = {
  basicInfo: React.PropTypes.object,
  formInfo: React.PropTypes.object,
  basicInfoSaveHandle: React.PropTypes.func, //基本信息保存成功的回调
  modalVisibleHandle: React.PropTypes.func, //用于添加审批人modal是否显示的传参
  onChangeAttr: React.PropTypes.func,//更改信息的回调 值&属性名
};

NewNodeKnow.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    user: state.login.user,
    languageList: state.login.languageList,
    language: state.main.language
  }
}

const wrappedNodeKnow = Form.create()(NewNodeKnow);

export default connect(mapStateToProps)(wrappedNodeKnow)
